<template>
  <div class="search">
      <div class="search1">
         <span class="fa fa-search tubiao" @click="aa"> 
           <input type="text" v-model="search"></span> 
      </div>
      <div class="yinshi">
        <h4>电影/电视剧/综艺</h4>
      </div>
    <div class="dianshi">
       <ul v-for="list in searchData" :key="list.id">
          <li >
               <div class="first">
                  <img :src='"/images/"+list.img' alt="">
               </div>
               <div class="second">
                   <p class="title">{{list.title}}</p>
                   <p class="actors ">{{list.leiixing}}</p>
                   <p class="actors">未来30天内上映</p>
               </div>
               <div >
                   <h2>{{list.score}}</h2>
               </div>
          </li>      
      </ul>
    </div>
  </div>
</template>

<script>
export default {
 name:'search',
 data(){
   return{
     search:'',
     searchData:'',
     dianyinglist:[
   {title:'机械师2：复活',img:'001.png',leiixing:'剧情，喜剧',score:'8.0'},
   {title:'敢死队',img:'002.png',leiixing:'剧情，喜剧',score:'9.0'},
   {title:'最后的巫师猎人',img:'003.png',leiixing:'剧情，喜剧',score:'9.9'},
   {title:'饥饿游戏3',img:'004.png',leiixing:'剧情，喜剧',score:'8.3'},
   {title:'钢铁骑士',img:'005.png',leiixing:'剧情，喜剧',score:'7.0'},
 ]
   }
 },
 methods:{
   aa(){
    var search = this.search;
        if (search) {
        this.searchData = this.dianyinglist.filter(function(product) {
          console.log(product)
        return Object.keys(product).some(function(key) {
          console.log(key)
          return String(product[key]).toLowerCase().indexOf(search) > -1
          
        })
        })
       this.search=''
        }
        
   }
   
 }
}

</script>

<style scoped>
  .search1{
   background: #f0f0f0;
   height: 40px;
   line-height: 40px;
  }

  span{
    padding-left: 12px;
    width: 90%;
  }
  input{
    margin-left: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    width: 88%;
    height: 20px;
    outline: none;
  }
  h4{
   margin: 10px;
   color: #777;
  }
  .yinshi{
    border-bottom:1px solid rgb(224, 224, 224);

  }
   .dianshi{
      width: 100%;
      margin-bottom: 35px;
  }
  img{
      width: 80px;
  }
  li{
      padding: 8px;
      overflow: hidden;
      border-bottom: 1px dashed #ccc;
      
  }
 .dianshi div{
     float:left;
 }
 .first{
     width: 23%;
 }
 .second{
     width:60%;
     margin-top: 10px;
 }
 .actors{
    font-weight: bold;
    font-size: 14px;
 }
 .title{
     font-size: 20px;
     font-weight: bold;
 }
 p{
     line-height: 25px;
 }
 .score{
     color: #F90;
     margin-left: 5px;
   font-weight: bold;
 }
 h2{
   color: #F90;
 }
</style>